<html>
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../style.css">
    <base target="_parent">
    <title data-trilium-title>Calendar View</title>
  </head>
  
  <body>
    <div class="content">
       <h1 data-trilium-h1>Calendar View</h1>

      <div class="ck-content">
        <figure class="image">
          <img style="aspect-ratio:767/606;" src="6_Calendar View_image.png" width="767"
          height="606">
        </figure>
        <p>The Calendar view of Book notes will display each child note in a calendar
          that has a start date and optionally an end date, as an event.</p>
        <p>Unlike other Book view types, the Calendar view also allows some kind
          of interaction, such as moving events around as well as creating new ones.</p>
        <h2>Creating a calendar</h2>
        <figure class="table" style="width:100%;">
          <table class="ck-table-resized">
            <colgroup>
              <col style="width:3.67%;">
                <col style="width:61.57%;">
                  <col style="width:34.76%;">
            </colgroup>
            <tbody>
              <tr>
                <th>1</th>
                <td>
                  <figure class="image">
                    <img style="aspect-ratio:545/299;" src="Calendar View_image.png" width="545"
                    height="299">
                  </figure>
                  <p>&nbsp;</p>
                </td>
                <td style="vertical-align:top;">
                  <p>The Calendar View works only for Book note types. To create a new note,
                    right click on the note tree on the left and select Insert note after,
                    or Insert child note and then select <i>Book</i>.</p>
                  <p>&nbsp;</p>
                </td>
              </tr>
              <tr>
                <th>2</th>
                <td>
                  <figure class="image">
                    <img style="aspect-ratio:314/233;" src="1_Calendar View_image.png" width="314"
                    height="233">
                  </figure>
                </td>
                <td style="vertical-align:top;">Once created, the “View type” of the Book needs changed to “Calendar”,
                  by selecting the “Book Properties” tab in the ribbon.</td>
              </tr>
            </tbody>
          </table>
        </figure>
        <h2>Creating a new event/note</h2>
        <ul>
          <li>Clicking on a day will create a new child note and assign it to that particular
            day.
            <ul>
              <li>You will be asked for the name of the new note. If the popup is dismissed
                by pressing the close button or escape, then the note will not be created.</li>
            </ul>
          </li>
          <li>It's possible to drag across multiple days to set both the start and end
            date of a particular note.
            <br>
            <img src="3_Calendar View_image.png" width="425" height="91">
          </li>
          <li>Creating new notes from the calendar will respect the <code>~child:template</code> relation
            if set on the book note.</li>
        </ul>
        <h2>Interacting with events</h2>
        <ul>
          <li>Hovering the mouse over an event will display information about the note.
            <br>
            <img src="4_Calendar View_image.png" width="323" height="160">
          </li>
          <li>Left clicking the event will go to that note. Middle clicking will open
            the note in a new tab and right click will offer more options including
            opening the note in a new split or window.</li>
          <li>Drag and drop an event on the calendar to move it to another day.</li>
          <li>The length of an event can be changed by placing the mouse to the right
            edge of the event and dragging the mouse around.</li>
        </ul>
        <h2>Configuring the calendar</h2>
        <p>The following attributes can be added to the book type:</p>
        <figure class="table"
        style="width:100%;">
          <table class="ck-table-resized">
            <colgroup>
              <col style="width:29.49%;">
                <col style="width:70.51%;">
            </colgroup>
            <thead>
              <tr>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><code>#calendar:hideWeekends</code>
                </td>
                <td>When present (regardless of value), it will hide Saturday and Sundays
                  from the calendar.</td>
              </tr>
              <tr>
                <td><code>#calendar:weekNumbers</code>
                </td>
                <td>When present (regardless of value), it will show the number of the week
                  on the calendar.</td>
              </tr>
              <tr>
                <td><code>~child:template</code>
                </td>
                <td>Defines the template for newly created notes in the calendar (via dragging
                  or clicking).</td>
              </tr>
            </tbody>
          </table>
        </figure>
        <p>In addition, the first day of the week can be either Sunday or Monday
          and can be adjusted from the application settings.</p>
        <h2>Configuring the calendar events</h2>
        <p>For each note of the calendar, the following attributes can be used:</p>
        <figure
        class="table">
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><code>#startDate</code>
                </td>
                <td>The date the event starts, which will display it in the calendar. The
                  format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus
                  sign).</td>
              </tr>
              <tr>
                <td><code>#endDate</code>
                </td>
                <td>Similar to <code>startDate</code>, mentions the end date if the event spans
                  across multiple days. The date is inclusive, so the end day is also considered.
                  The attribute can be missing for single-day events.</td>
              </tr>
              <tr>
                <td><code>#color</code>
                </td>
                <td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or
                  hex such as <code>#FF0000</code>). This will also change the color of the
                  note in other places such as the note tree.</td>
              </tr>
              <tr>
                <td><code>#calendar:color</code>
                </td>
                <td>Similar to <code>#color</code>, but applies the color only for the event
                  in the calendar and not for other places such as the note tree.</td>
              </tr>
              <tr>
                <td><code>#iconClass</code>
                </td>
                <td>If present, the icon of the note will be displayed to the left of the
                  event title.</td>
              </tr>
              <tr>
                <td><code>#calendar:title</code>
                </td>
                <td>Changes the title of an event to point to an attribute of the note other
                  than the title, either a label (e.g. <code>#assignee</code>) or a relation
                  (e.g. <code>~for</code>). See <i>Advanced use-cases</i> for more information.</td>
              </tr>
              <tr>
                <td><code>#calendar:promotedAttributes</code>
                </td>
                <td>
                  <p>Allows displaying the value of one or more promoted attributes in the
                    calendar like this:
                    <img src="19_Calendar View_image.png" width="131" height="113">
                  </p><pre><code class="language-text-x-trilium-auto">#label:weight="promoted,number,single,precision=1"
#label:mood="promoted,alias=Mood,single,text"
#calendar:promotedAttributes="label:weight,label:mood" </code></pre>
                  <p>It can also be used with relations, case in which it will display the
                    title of the target note:</p><pre><code class="language-text-x-trilium-auto">#relation:assignee="promoted,alias=Assignee,single,text"
#calendar:promotedAttributes="relation:assignee" 
~assignee=@My assignee </code></pre>
                </td>
              </tr>
              <tr>
                <td><code>#calendar:startDate</code>
                </td>
                <td>Allows using a different label to represent the start date, other than <code>#startDate</code> (e.g. <code>#expiryDate</code>).
                  The label name must be prefixed with <code>#</code>. If the label is not
                  defined for a note, the default will be used instead.</td>
              </tr>
              <tr>
                <td><code>#calendar:endDate</code>
                </td>
                <td>Allows using a different label to represent the start date, other than <code>#endDate</code>.
                  The label name must be prefixed with <code>#</code>. If the label is not
                  defined for a note, the default will be used instead.</td>
              </tr>
            </tbody>
          </table>
          </figure>
          <h2>How the calendar works</h2>
          <p>
            <img class="image-style-align-left" src="7_Calendar View_image.png" width="329"
            height="116">The calendar displays all the child notes of the book that have a <code>#startDate</code>.
            An <code>#endDate</code> can optionally be added.</p>
          <p>If editing the start date and end date from the note itself is desirable,
            the following attributes can be added to the book note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date" #label:endDate(inheritable)="promoted,alias=End Date,single,date" #hidePromotedAttributes </code></pre>
          <p>This will result in:</p>
          <p>
            <img src="9_Calendar View_image.png" width="264" height="164">
          </p>
          <p>When not used in a Journal, the calendar is recursive. That is, it will
            look for events not just in its child notes but also in the children of
            these child notes.</p>
          <h2>Use-cases</h2>
          <h3>Using with the Journal / calendar</h3>
          <p>It is possible to integrate the calendar view into the Journal with day
            notes. In order to do so change the note type of the Journal note (calendar
            root) to Book and then select the Calendar View.</p>
          <p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
            attribute, the calendar will know that it's in a calendar and apply the
            following:</p>
          <ul>
            <li>The calendar events are now rendered based on their <code>dateNote</code> attribute
              rather than <code>startDate</code>.</li>
            <li>Interactive editing such as dragging over an empty era or resizing an
              event is no longer possible.</li>
            <li>Clicking on the empty space on a date will automatically open that day's
              note or create it if it does not exist.</li>
            <li>Direct children of a day note will be displayed on the calendar despite
              not having a <code>dateNote</code> attribute. Children of the child notes
              will not be displayed.</li>
          </ul>
          <figure class="image">
            <img style="aspect-ratio:1217/724;" src="18_Calendar View_image.png" width="1217"
            height="724">
          </figure>
          <h3>Using a different attribute as event title</h3>
          <p>By default, events are displayed on the calendar by their note title.
            However, it is possible to configure a different attribute to be displayed
            instead.</p>
          <p>To do so, assign <code>#calendar:title</code> to the child note (not the
            calendar/book note), with the value being <code>#name</code> where <code>name</code> can
            be any label. The attribute can also come through inheritance such as a
            template attribute. If the note does not have the requested label, the
            title of the note will be used instead.</p>
          <figure class="table">
            <table>
              <tbody>
                <tr>
                  <td>
                    <figure class="image">
                      <img style="aspect-ratio:631/115;" src="10_Calendar View_image.png" width="631"
                      height="115">
                    </figure>
                  </td>
                  <td>
                    <figure class="image">
                      <img style="aspect-ratio:445/124;" src="11_Calendar View_image.png" width="445"
                      height="124">
                    </figure>
                  </td>
                </tr>
              </tbody>
            </table>
          </figure>
          <h3>Using a relation attribute as event title</h3>
          <p>Similarly to using an attribute, use <code>#calendar:title</code> and set
            it to <code>~name</code> where <code>name</code> is the name of the relation
            to use.</p>
          <p>Moreover, if there are more relations of the same name, they will be displayed
            as multiple events coming from the same note.</p>
          <figure class="table">
            <table>
              <tbody>
                <tr>
                  <td>
                    <figure class="image">
                      <img style="aspect-ratio:666/118;" src="15_Calendar View_image.png" width="666"
                      height="118">
                    </figure>
                  </td>
                  <td>
                    <figure class="image">
                      <img style="aspect-ratio:294/151;" src="13_Calendar View_image.png" width="294"
                      height="151">
                    </figure>
                  </td>
                </tr>
              </tbody>
            </table>
          </figure>
          <p>Note that it's even possible to have a <code>#calendar:title</code> on the
            target note (e.g. “John Smith”) which will try to render an attribute of
            it. Note that it's not possible to use a relation here as well for safety
            reasons (an accidental recursion &nbsp;of attributes could cause the application
            to loop infinitely).</p>
          <figure class="table">
            <table>
              <tbody>
                <tr>
                  <td>
                    <figure class="image">
                      <img style="aspect-ratio:364/121;" src="16_Calendar View_image.png" width="364"
                      height="121">
                    </figure>
                  </td>
                  <td>
                    <figure class="image">
                      <img style="aspect-ratio:296/150;" src="17_Calendar View_image.png" width="296"
                      height="150">
                    </figure>
                  </td>
                </tr>
              </tbody>
            </table>
          </figure>
      </div>
    </div>
  </body>

</html>